<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input {
            width: 40px;
            height: 20px;
        }
        
        span {
            margin-right: 50px;
        }
        
        .form-item {
            width: 400px;
            padding: 8px;
            border-bottom: 1px dashed #000;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="form">
        <div class="form-item">
            <span>华为手机</span> ￥
            <span class="num">3000</span>
            <input type="number" value="0">台
            <button class="add">+</button>
            <button class="sub">-</button>
        </div>
        <div class="form-item">
            <span>oppo手机</span> ￥
            <span class="num">2000</span>
            <input type="number" value="0">台
            <button class="add">+</button>
            <button class="sub">-</button>
        </div>
        <div class="form-item">
            <span>苹果手机</span> ￥
            <span class="num">5000</span>
            <input type="number" value="0">台
            <button class="add">+</button>
            <button class="sub">-</button>
        </div>

    </div>

    <div class="total">
        共选择<span class="totalNum">0</span>台 总计
        <span class="totalPrice">0</span>元
    </div>
    <script>
        let arr = [1, 1, 1]
        let priceArr = [3000, 2000, 5000]
            //封装计算台数和价格的函数
        function getResult(arr) {
            let totalNum = 0
            let totalPrice = 0
            arr.forEach(function(num, index) {
                //计算有多少台数
                totalNum += num
                    //计算总价格
                totalPrice += priceArr[index] * num
            });
            return {
                totalNum: totalNum,
                totalPrice: totalPrice
            }
        }

        //获取所有用到的元素
        let adds = document.querySelectorAll('.add')
        let subs = document.querySelectorAll('.sub')
        let inputs = document.querySelectorAll('input')
        let totalNum = document.querySelector('.totalNum')
        let totalPrice = document.querySelector('.totalPrice')
        adds.forEach(function(add, i) {
                add.addEventListener('click', function() {
                    //点击加号输入框内的数字加1
                    let num = parseInt(inputs[i].value) + 1
                    inputs[i].value = num
                        //将输入框内的数值刚入一个空数组中
                    let arr = []
                    inputs.forEach(function(input) {
                            arr.push(parseInt(input.value))
                        })
                        //调用计算函数
                    let obj = getResult(arr)
                        // 讲计算结果展示到页面上
                    totalNum.textContent = obj.totalNum
                    totalPrice.textContent = obj.totalPrice


                })
            })
            //遍历减号，给每个减号注册点击事件
        subs.forEach(function(sub, i) {
                sub.addEventListener('click', function() {
                    //点击减号输入框内的数字减少1
                    let num = parseInt(inputs[i].value) - 1
                        //处理边界问题，数量不能小于0
                    if (num < 0) {
                        return
                    }
                    inputs[i].value = num
                        //将获取的值刚入一个空数组中
                    let arr = []
                    inputs.forEach(function(input) {
                            arr.push(parseInt(input.value))
                        })
                        //调用计算函数
                    let obj = getResult(arr)
                        // 将计算结果展示到页面上
                    totalNum.textContent = obj.totalNum
                    totalPrice.textContent = obj.totalPrice
                })
            })
            //遍历输入框，给每个输入框注册输入事件
        inputs.forEach(function(input) {
            input.addEventListener('input', function() {

                // 放入数组
                let arr = []
                if (parseInt(this.value) <= 0 || isNaN(parseInt(this.value))) {
                    //判断如果为负值，替换成0
                    this.value = 0
                }
                inputs.forEach(function(input) {
                        arr.push(parseInt(input.value))
                    })
                    //计算出台数和总价格的函数
                let obj = getResult(arr)
                    // 展示到页面上
                totalNum.textContent = obj.totalNum
                totalPrice.textContent = obj.totalPrice
            })

        })
    </script>
</body>

</html>